<template>
  <div class="shopping-container">
    <div class="shopping-header">
      <van-image :src="userAvatar" round fit="cover" height="110px"></van-image>
      <div class="header-right">
        <van-button
          color="#F2B275"
          size="small"
          style="width: 120px"
          @click="
            () => {
              router.push({
                name: 'shoppingCreate',
              });
            }
          "
          >我要消费</van-button
        >
        <van-divider style="margin: 10px 0" />
        <div>{{ name }}</div>
        <div class="price">
          <span>余额：</span>
          <van-image
            :src="priceIcon"
            fit="cover"
            width="1rem"
            height="1rem"
            style="margin-right: 6px"
          ></van-image>
          <span>{{ Number(balance) / 100 }}</span>
        </div>
      </div>
    </div>
    <div class="shopping-body">
      <van-search
        v-model="value"
        style="padding: 0"
        placeholder="请输入搜索关键词"
      />

      <div class="body-screen">
        <div>2023</div>
        <div class="screen-right">
          共消费：
          <van-image
            :src="priceIcon"
            fit="cover"
            width="1rem"
            height="1rem"
            style="margin-right: 6px"
          ></van-image>
          <span>{{ Number(consumptionAmount) / 100 }}</span>
        </div>
      </div>

      <div style="padding: 20px 0">
        <CustomCard
          type="shopping"
          :item="item"
          v-for="item in state.shoppingList"
          :key="item.id"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import userAvatar from "@/assets/images/avatar.png";
import priceIcon from "@/assets/images/piece-yellow.png";
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "../../stores";
import { getCoinRecordForPages, getUserBalance } from "../../service/user";
import { reactive, ref } from "vue";
import { showToast, showSuccessToast } from "vant";
import CustomCard from "@/components/CustomCard/Index.vue";

const userStore = useUserStore();
const route = useRoute();
const router = useRouter();

const { avatar, name } = userStore.userData;

const state = reactive({
  shoppingList: [],
});

const getShoppingList = async () => {
  const { data } = await getCoinRecordForPages();
  state.shoppingList = data.list;
};

const balance = ref(0);
const consumptionAmount = ref(0);
//获取用户余额
const userBalance = async () => {
  const { data } = await getUserBalance();
  balance.value = data.balance;
  consumptionAmount.value = data.consumptionAmount;
};
userBalance();
getShoppingList();
</script>

<style scoped lang="less">
.shopping-container {
  padding: 24px;
  .shopping-header {
    padding: 0 20px;
    background: #78669c;
    display: flex;
    align-items: center;
    border-radius: 8px;
    .header-right {
      flex: 1;
      padding: 20px;
      padding-right: 0;
      text-align: center;
      color: #fff;
      .price {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .shopping-body {
    padding: 14px 0;

    .body-screen {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .screen-right {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
